<template>
  <el-date-picker
    :ref="refName"
    v-model="date"
    type="daterange"
    range-separator="至"
    start-placeholder="开始"
    end-placeholder="结束"
    format="MM-dd"
    @change="getDate"
  >
  </el-date-picker>
</template>

<script>
export default {
  props: {
    refName: {
      type: String,
      default: "ref",
    },
  },
  data() {
    return {
      date: [new Date(), new Date()],
    };
  },
  methods: {
    getDate() {
      const byDateVo = {
        startTime: this.formatDate(this.date[0]),
        endTime: this.formatDate(this.date[1]),
      };
      this.$emit("getDate", { byDateVo, ref: this.refName });
    },
    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let day = date.getDate();
      day = day < 10 ? "0" + day : day;
      return year.toString() + "-" + month.toString() + "-" + day;
    },
  },
  mounted() {
    const keyNode = this.$refs[this.refName].$el;
    const iNode = document.createElement("i");
    iNode.setAttribute("class", "el-icon-caret-bottom");
    keyNode.appendChild(iNode);
    iNode.style.position = "absolute";
    iNode.style.top = "8px";
    iNode.style.right = "8px";
    iNode.style.color = "#2087D0";
  },
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 164px !important;
  height: 38px;
  background: #f4fbff;
  border-radius: 19px;

  &::v-deep .el-range-input {
    background: #f4fbff;
    color: #2087d0;
  }

  &::v-deep .el-range-separator {
    width: 6%;
    color: #2087d0;
  }

  &::v-deep .el-input__icon {
    display: none;
  }
}
</style>
